<template>
    <div>
        <!-- colsNumber: 几列 -->
        <SearchForm
            @reset="reset"
            @search="search"
            ref="search"
            :form="form"
            @changeShow="changeShow"
            :colsNumber="3"
        >
            <!-- 这个列折叠两个网格 -->
            <el-form-item label="label" style="grid-column-start: span 2">
                <el-input v-model="form.a"></el-input>
            </el-form-item>
            <el-form-item label="label">
                <el-input v-model="form.a"></el-input>
            </el-form-item>
            <el-form-item label="label">
                <el-input v-model="form.a"></el-input>
            </el-form-item>
            <el-form-item label="label">
                <el-input v-model="form.a"></el-input>
            </el-form-item>
        </SearchForm>

        <el-button type="primary" size="default" @click="v">规则验证</el-button>
        <el-button type="primary" size="default" @click="vs"
            >规则验证</el-button
        >
    </div>
</template>
<script>
export default {
    name: "",
    components: {},
    mixins: [],
    props: {},
    data() {
        return {
            form: {
                a: "",
            },
        };
    },
    computed: {},
    watch: {},
    mounted() {},
    methods: {
        reset() {},
        search() {},
        /**
         * 展开点击事件回调
         * @param {boolean} state - 是否已经展开
         */
        changeShow(state) {},
        // 获取同步验证结果
        async v() {
            let pass = this.$refs.search.validate();
            if (!pass) return;
            /// do something
        },
        // 验证
        vs() {
            this.$refs.search?.ref_form.validate((v) => {
                console.log(v);
            });
        },
    },
};
</script>
<style lang="" scoped></style>
